<template>
  <!-- 未完成 -->
  <Splitpanes class="default-theme" :style="{ height: height + 'px' }">
    <Pane min-size="20">
      <p>1</p>
    </Pane>
    <Pane>2</Pane>
    <Pane>5</Pane>
  </Splitpanes>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue'
  import Splitpanes from './splitpanes'
  import Pane from './pane'
  export default defineComponent({
    name: 'VuiSplitPane',
    setup() {
      const height = ref(0)
      onMounted(() => {
        height.value = document.querySelector('.vui-app-main').clientHeight + 29
      })
      return {
        Splitpanes,
        Pane,
        heigth: height,
      }
    },
  })
</script>

<style lang="scss" scoped></style>
